<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>在线QQ</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script src="/socket.io/socket.io.js"></script>
<script>
var config = {};
config.host = 'localhost:8888';

window.onload = function () {
	var _sock = io.connect('ws://' + config.host + '/');
	var sock = null;

	_sock.on('open', function (data) {
		sock = _sock;

		if(!sock) {
			alert('没有连接到服务器');
			return;
		}
		
		var reg = new ModelReg(sock);
	  reg.init();
	});
};

function ModelReg(sock) {
	this.nick = document.querySelectorAll('.user_nick')[0];
	this.pass = document.querySelectorAll('.user_pass')[0];
	this.repass = document.querySelectorAll('.user_repass')[0];
	this.email = document.querySelectorAll('.user_email')[0];
	this.btnSubmit = document.querySelectorAll('.submit input')[0];
	this.sock = sock;
}

ModelReg.prototype = {
	init: function () {
		this.addEvent();
	},
	addEvent: function () {
		var _this = this;
		
		// 昵称
		this.nick.onblur = function () {
			_this.checkNick(this);
		};
		
		this.nick.onfocus = function () {
			_this.iptFocus(this, 'tips', '请输入昵称');
		};
		
		// 密码
		this.pass.onblur = function () {
			_this.checkPass(this);
		};
		
		this.pass.onfocus = function () {
			_this.iptFocus(this, 'tips', '不含空格的6-16位字符或不小于9位纯数字');
		};
		
		// 重复密码
		this.repass.onblur = function () {
			_this.checkRePass(this);
		};
		
		this.repass.onfocus = function () {
			_this.iptFocus(this, 'tips', '请重新输入密码');
		};
		
		// 邮箱
		this.email.onblur = function () {
			_this.checkEmail(this);
		}
		
		this.email.onfocus = function () {
			_this.iptFocus(this, 'tips', '请输入邮箱');
		};
		
		// 注册按钮
		this.btnSubmit.onclick = function () {
			_this.regSubmit(this);
		};
	},
	iptFocus: function (obj, type, msg) {
		obj.parentNode.className = 'bg_txt bg_focus';
		if (type) this.showtip(obj, type);
		if (msg) this.showtip(obj, type, msg); 
	},
	checkNick: function (obj) {
		if (!obj.value.length) this.showtip(obj, 'fail', '昵称不可以为空');
		else {
			this.showtip(obj, 'succ');
			return true;
		}
	},
	checkPass: function (obj) {
		var re1 = /\s/;
		var re2 = /^\d{0,8}$/;
		var re3 = /(^[\w]{0,5}$)|(^[\w]{17,}$)/;
		var re4 = /[\u4E00-\u9FA5]+/;
		var result = 0;
		var str = obj.value;
		
		if (str) {
			if (re1.test(str)) result = 1;  // 包含空格
			if (re2.test(str)) result = 2;  // 9位以下的纯数字
			if (re3.test(str)) result = 3;  // 长度不在6-16个字符内
			if (re4.test(str)) result = 4;  // 长度不在6-16个字符内
		}
		
		if (obj.value.length) {
			if (result == '0') {
				this.showtip(obj, 'succ');
				return true;
			}
		  if (result == '1') this.showtip(obj, 'fail', '不能包含空格');
		  if (result == '2') this.showtip(obj, 'fail', '不能是9位以下纯数字');
		  if (result == '3') this.showtip(obj, 'fail', '长度为6-16个字符');
			if (result == '4') this.showtip(obj, 'fail', '密码不允许使用中文');
		} else {
			this.showtip(obj, 'fail', '密码不能为空');
		}
	},
	checkRePass: function (obj) {
		if (obj.value.length) {
			if (obj.value == this.pass.value) {
				this.showtip(obj, 'succ');
				return true;
			}
			else this.showtip(obj, 'fail', '两次密码输入不一致');
		} else {
			this.showtip(obj, 'fail', '重复密码不能为空');
		}
	},
	checkEmail: function (obj, callback) {
		var _this = this;
		if (obj.value.length) {
			var re = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
			if (re.test(obj.value)) {
				_this.sock.removeAllListeners('check_email_result');
				_this.sock.on('check_email_result', function (data) {
					if (callback) callback(data);
					
					if (data.code) {
						_this.showtip(obj, 'fail', '此邮箱已注册');
					} else {
						_this.showtip(obj, 'succ', '可以注册');
						return true;
					}
				});
				_this.sock.emit('check_email', {email: _this.email.value});
			} else {
			this.showtip(obj, 'fail', '请输入正确的邮箱格式');
			}
		} else {
			this.showtip(obj, 'fail', '邮箱不能为空');
		}
	},
	regSubmit: function (obj) {
		var _this = this;
		var passNick = this.checkNick(this.nick);
		var passPass = this.checkPass(this.pass);
		var passRePass = this.checkRePass(this.repass);
		
		this.checkEmail(this.email, function (data) {
			if (data.code == 0 && passNick && passPass && passRePass) {
				_this.sock.removeAllListeners('user_reg_result');
				_this.sock.on('user_reg_result', function (data) {
					var regForm = document.querySelectorAll('.reg_form')[0];
					regForm.style.display = 'none';
					
					var regMain = document.querySelectorAll('.reg_main')[0];
					var regUid = regMain.querySelectorAll('.rember_uin .red_text')[0];

					regUid.innerHTML = data.uid;
					regMain.style.display = 'block';
				});
				_this.sock.emit('user_reg', {nick: _this.nick.value, pass: _this.pass.value, email: _this.email.value});
			}
		});
	},
	showtip: function (obj, type, msg) {
		var parent = parents(obj, 'box');
		var ipt = parent.querySelectorAll('.new_txt')[0];
		var iptbg = ipt.parentNode;
		var info = parent.querySelectorAll('.info')[0];
		var tips = info.querySelectorAll('.tips')[0];
		var tip = tips.children[0];
		
		switch (type) {
			case 'succ': tip.className = 'ok';
			             iptbg.className = 'bg_txt';
			             break;
			case 'fail': tip.className = 'error';
			             iptbg.className = 'bg_error';
			             break;
			case 'tips': tip.className = 'tip';
					default: break;
		}
		
		if (msg) tip.innerHTML = msg;
		else tip.innerHTML = '&nbsp;';
	},

};

function parents(obj, klass) {
	var re = new RegExp('\\b' + klass + '\\b', 'ig');
	while (obj) {
		if (re.test(obj.className)) return obj;
		obj = obj.parentNode;
	}
}

function addClass(obj, klass) {
	var re = new RegExp('\\b' + klass + '\\b', 'ig');
	if (!re.test(obj.className)) obj.className += (' ' + klass);
}

function removeClass(obj, klass) {
	var re = new RegExp('\\b' + klass + '\\b', 'ig');
	if (re.test(obj.className)) obj.className = obj.className.replace(re, '');
	obj.className = trim(obj.className);
}

function trim(str) {
	var result = str;
	result = str.replace(/(\s+)/ig, ' ');
	result = result.replace(/^\s+/ig, '');
	result = result.replace(/\s+$/ig, '');
	return result;
}
</script>
</head>

<body>
<div class="bg">
  <div class="container">
    <div class="header">
      <a title="QQ注册" target="_self" class="logo" href="index.html"></a>
      <a title="" target="_blank" class="feedback">立即登录</a>
    </div>
    
    <div class="content">
      <div class="left">
        <a href="javascript:;" class="nav_box cur"><span class="dt nav_1">QQ帐号</span><span class="dd">由数字组成，经典通行帐号</span></a>
      </div>
      
      <div class="right">
        <div class="reg_main">
          <div class="main_inner">
            <div class="reg_msg msyh">
              <p><span>申请成功，</span><span>您获得号码：</span></p>
              <p class="rember_uin"><span class="red_text">2557024897</span><span class="hidden">.</span></p>
              <div class="login_wrap">
                <div class="login_bg">
                  <span class="login_btn msyh"><a href="./" title="登录QQ" tabindex="3">登录QQ</a></span>
                  <a class="login_area" href="javascript:;" tabindex="4" title="更多登录选项"></a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="reg_form">
          <div class="box">
            <label class="item">昵称</label>
            <div class="ipt_box">
              <div class="bg_txt bg_focus">
                <input class="new_txt user_nick" type="text" autocomplete="off" maxlength="24" tabindex="6" />
              </div>
            </div>
            <div class="info">
              <div class="tips">
                <div class="tip">请输入昵称</div>
              </div>
            </div>
          </div>
          
          <div class="box">
            <label class="item">密码</label>
            <div class="ipt_box">
              <div class="bg_txt bg_focus">
                <input class="new_txt user_pass" type="password" autocomplete="off" maxlength="24" tabindex="6" />
              </div>
            </div>
            <div class="info">
              <div class="tips">
                <div class="tip">不含空格的6-16位字符或不小于9位纯数字</div>
              </div>
            </div>
          </div>
          
          <div class="box">
            <label class="item">重复密码</label>
            <div class="ipt_box">
              <div class="bg_txt bg_focus">
                <input class="new_txt user_repass" type="password" autocomplete="off" maxlength="24" tabindex="6" />
              </div>
            </div>
            <div class="info">
              <div class="tips">
                <div class="tip">请重新输入密码</div>
              </div>
            </div>
          </div>
          
          <div class="box">
            <label class="item">邮箱</label>
            <div class="ipt_box">
              <div class="bg_txt bg_focus">
                <input class="new_txt user_email" type="text" autocomplete="off" maxlength="24" tabindex="6" />
              </div>
            </div>
            <div class="info">
              <div class="tips">
                <div class="tip">请输入邮箱</div>
              </div>
            </div>
          </div>
          
          <div class="box">
            <label class="item"></label>
            <div class="ipt_box">
              <div class="submit">
                <input type="button" value="立即注册" />
              </div>
            </div>
            <div class="info"></div>
          </div>
        </div>
      </div>
    </div>
  </div>



</div>
<div class="footer">
  Copyright
  <span>©</span>
  1998-2013 Tencent All Rights Reserved 腾讯公司 版权所有
</div>
</body>
</html>